// font-size ft-12 => ft-36  间隔2
.font(@i) when (@i <= 48) {
    .ft-@{i} {
        font-size: @i + 0px !important;
        line-height: @i + 8px;
    }
    .font((@i + 2));
};
.font(12);

// font-weight ft-w200 => ft-w600 间隔100
.font-weight(@i) when (@i <= 600) {
    .ft-w@{i} {
        font-weight: @i;
    }
    .font-weight((@i + 100));
};
.font-weight(200); // ft-w200 => ft-w600 间隔100

// padding
.padding(@i) {
    .pdt-@{i} {
        padding-top: @i + 0px !important;
    }
    .pdb-@{i} {
        padding-bottom: @i + 0px !important;
    }
    .pdl-@{i} {
        padding-left: @i + 0px !important;
    }
    .pdr-@{i} {
        padding-right: @i + 0px !important;
    }
    .pd-@{i} {
        padding: @i + 0px !important;
    }
};
.padding(0);
.padding(8);
.padding(16);
.padding(24);
.padding(36);
.padding(48);
.padding(60);

// margin
.margin(@i) {
    .mgt-@{i} {
        margin-top: @i + 0px !important;
    }
    .mgb-@{i} {
        margin-bottom: @i + 0px !important;
    }
    .mgl-@{i} {
        margin-left: @i + 0px !important;
    }
    .mgr-@{i} {
        margin-right: @i + 0px !important;
    }
};
.margin(0);
.margin(4);
.margin(8);
.margin(12);
.margin(16);
.margin(24);
.margin(36);
.margin(48);
.margin(60);

// border
.border(@clr; @name) {
    .bd-@{name} {
        border: 1px solid @clr;
    }
    .bdt-@{name} {
        border-top: 1px solid @clr;
    }
    .bdl-@{name} {
        border-left: 1px solid @clr;
    }
    .bdr-@{name} {
        border-right: 1px solid @clr;
    }
    .bdb-@{name} {
        border-bottom: 1px solid @clr;
    }
}
.border(@bd-clr-l; l);
.border(@green; green);
.border(@white; white);

.bd-rds-half {
    border-radius: 50%;
    overflow: hidden;
}

.border-radius(@i) {
    .bd-rds-@{i} {
        border-radius: @i + 0px;
        overflow: hidden;
    }
}

.border-radius(4);
.border-radius(8);
.border-radius(12);

.no-bd {
    border: none !important;
    &:hover, &:active, &:focus {
        border: none !important;
    }
}

// color    3 6 9 c
.ft-clr-d {
    color: @ft-clr-d;
}

.ft-clr-md {
    color: @ft-clr-md;
}

.ft-clr-ml {
    color: @ft-clr-ml;
}

.ft-clr-l {
    color: @ft-clr-l;
}

.clr-fff {
    color: @white !important;
}
.clr-000 {
    color: @black !important;
}

.clr-green {
    color: @green !important;
}
.clr-orange {
    color: @orange !important;
}

.bg-f5 {
    background-color: @bg-f5;
}
.bg-green {
    background-color: @green;
    color: @white;
}

// opacity
.opacity(@i) when (@i <= 100) {
    .opa-@{i} {
        opacity: (@i/100) !important;
    }
    .opacity(@i + 10)
}
.opacity(0);

.opa-transition-off {
    transition: opactiy 0s ease-in;
}

// mixins
.flex {
    .flex();
}

.flex1{
    flex: 1;
}

.flex-center {
    .flex-center();
}

.flex-horizontal-around {
    .flex-horizontal-around();
}

.flex-vertical-center {
    .flex-vertical-center();
}

.flex-vertical-top {
    .flex-vertical-top();
}

.flex-horizontal-center {
    .flex-horizontal-center()
}

.flex-row-between {
    .flex-row-between()
}

.flex-row-right {
    .flex-row-right()
}

.overflow-hidden {
    .overflow-hidden()
}

.overflow-x {
    .overflow-hidden();
    overflow-x: overlay;
}

.overflow-y {
    .overflow-hidden();
    overflow-y: overlay;
}

.text-overflow {
    .text-overflow()
}

// customer

.fll {
    float: left;
}

.flr {
    float: right;
}

.txr {
    text-align: right;
}
.txc {
    text-align: center;
}

.clearfix {
    .clearfix()
}

.absolute-fullscreen {
    .absolute-fullscreen()
}

.hidden {
    display: none !important;
}
.hidden-visible {
    visibility: hidden;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-left {
    text-align: left;
}

.cur-poi {
    cursor: pointer;
}
.cur-move {
    cursor: move;
}

.button-large {
    min-width: 108px;
    height: 48px;
    border-radius: 8px;
}

.button-middle {
    min-width: 108px;
    height: 36px;
    border-radius: 6px;
}

.button-small {
    min-width: 88px;
    height: 36px;
    border-radius: 6px;
}

.button-in-table {
    min-width: 64px;
    height: 28px;
    .ft-12;
    padding: 4px 9px;
}

.bd-hover {
    .bd-hover();
}
.ft-hover {
    .ft-hover();
}
.bg-hover {
    .bg-hover();
}
.bg-hover-f9 {
    translation: background .3s;
    cursor: pointer;
    background: @white;
    &:hover {
        background: @bg-f5;
    }
}
.max-w-quarter-1 {
    max-width: 25%;
}
.max-w-quarter-2 {
    max-width: 50%;
}
.max-w-quarter-3 {
    max-width: 75%;
}
.w-100 {
    width: 100%;
}